<template>
  <div style="max-height:200px;padding:0 10px;overflow:auto">
    <div style="display:flex;height:50px;align-items:center;border-bottom:1px solid #EBEEF5;font-size:14px;font-weight:600;color:#404040">
      <div style="width:300px">Name</div>
      <div style="flex:1;text-align:center">Action</div>
    </div>
    <draggable v-model="selectList"  chosenClass="chosen" forceFallback="true" animation="1000" filter=".forbid" @end="onEnd(selectList)">
        <transition-group>
          <div class="item" style="display:flex;height:50px;align-items:center;border-bottom:1px solid #EBEEF5;font-size:14px" v-for="item in selectList" :key="item.resourceName">
            <div style="width:300px;cursor:move">{{item.resourceName}}</div>
            <div style="flex:1;text-align:center" @click="removeReportHandler(item,selectList)" class="cuifont icon_delete color_hover cursor_pointer forbid"></div>
          </div>
        </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    selectList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
    }
  },
  methods: {
    onEnd (selectList) {
      this.$emit('update', selectList)
    },
    removeReportHandler (row, selectList) {
      var index = selectList.findIndex(item => item.id === row.id)
      selectList.splice(index, 1)
      this.$forceUpdate()
    }

  }
}
</script>
<style lang="scss" scoped>
.cursor_pointer {
  cursor: pointer
}
.bgc_hover:hover {
  background-color: $--theme-color-background;
  color: $--theme-color
}
.color_hover:hover {
  color: #17B3A3!important
}
</style>
